<!-- 住户管理 住户列表表格 -->
<template>
    <div class="main">
        <div class="multi-select">
            <span>{{ tablename }}</span>
            <div>
                <a-button type="primary" @click="adddata">
                    +新建
                </a-button>
                <a-button type="primary" :disabled="!hasSelected" :loading="loading" @click="start">
                    批量处理
                </a-button>
            </div>
        </div>

        <div class="data-tree-taber">
            <!-- 树形控件 -->
            <div class="treeBOX">
                <h2>南航碧桂园小区</h2>
                <a-tree :expanded-keys="expandedKeys" :auto-expand-parent="autoExpandParent" @select="onSelect"
                    :tree-data="treeTitle" @expand="onExpand">
                    <template slot="title" slot-scope="{ title }">
                        <span v-if="title.indexOf(searchValue) > -1">
                            {{ title.substr(0, title.indexOf(searchValue)) }}
                            <span style="color: #f50">{{ searchValue }}</span>
                            {{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
                        </span>
                        <span v-else>{{ title }}</span>
                    </template>
                </a-tree>

            </div>
            <!-- 表格组件 -->
            <a-table :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, }"
                :columns="taberTitle" :data-source="data" :rowKey="record => record.pageid">
                <!-- <a slot="action" slot-scope="text">{{ text }}</a> -->

                <span slot="tags" slot-scope="tags">
                    <a-tag
                        :color="tags === '审核中' ? 'volcano' : tags === '审核通过' ? 'green' : tags === '审核不通过' ? 'geekblue' : 'volcano'">
                        {{ tags }}
                    </a-tag>
                </span>
                <span slot="action" slot-scope="text,record">

                    <!-- 跳转到房屋详情页面 -->
                    <a @click="JumpReview(record)">审核</a>
                    <a-divider type="vertical" />

                    <!-- 跳转到新建房屋页面 -->
                    <a @click="JumpEdit(record)">编辑</a>
                    <a-divider type="vertical" />
                    <a @click="showDeleteConfirm(record)">
                        删除
                    </a>
                </span>
                <!-- <zonelist></zonelist> -->
            </a-table>
        </div>
    </div>
</template>
<script>

export default {
    name: 'ServiceLIstFrom',
    data() {
        return {

            selectedRowKeys: [], // Check here to configure the default column
            loading: false,
            // data: [],

            // 树状组件
            expandedKeys: [],
            searchValue: '',
            autoExpandParent: true,

        };
    },
    watch: {
        checkedKeys(val) {
            console.log('onCheck', val);
        },
    },
    // 接收传递进来的头部数据进行渲染
    props: {
        taberTitle: {
            type: Array,
            default: []
        },
        tablename: {
            type: String,
            default: ""
        },
        data: {
            type: Array,
            default: []
        },
        pageurl: {
            type: Array,
            default: []
        },
        treeTitle: {
            type: Array,
            default: []
        }
    },
    mounted() {
        // this.selectedRowKeys = this.taberTitle

    },
    created() {
        //将数据重新进行赋值，以防修改数据时修改父组件传入进来的数据



    },

    computed: {
        hasSelected() {
            return this.selectedRowKeys.length > 0;
        },
    },
    methods: {



        //跳转审核页
        JumpReview() {
            this.$router.push(this.pageurl[0])
        },
        //跳转编辑页
        JumpEdit() {
            this.$router.push(this.pageurl[1])
        },
        start() {
            this.loading = true;
            // ajax request after empty completing
            // console.log(this.selectedRowKeys)

            setTimeout(() => {

                let A = this.data.filter(item => {
                    // console.log(this.selectedRowKeys.includes(item.pageid))
                    //批量处理进行取反
                    return !(this.selectedRowKeys.includes(item.pageid))

                })
                // console.log(A)
                this.data = A
                this.loading = false;
                this.selectedRowKeys = [];
            }, 1000);
        },
        onSelectChange(selectedRowKeys, selectedRows) {
            // console.log('selectedRowKeys changed: ', selectedRowKeys, selectedRows);
            this.selectedRowKeys = selectedRowKeys;
        },
        addlistdatafn() {

        },
        record(record) {
            return {
                props: {
                    ParkingState: record.ParkingState,
                },
            }
        },
        showDeleteConfirm(record) {
            // console.log(record)//当前列的数据
            this.$confirm(
                {
                    title: '删除确认',
                    content: '确定删除此信息吗？',
                    okText: '确认',
                    okType: 'danger',
                    cancelText: '取消',
                    icon: "",
                    onOk: () => {

                        //点击删除时进行过滤数据
                        let staging = this.data.filter(item => {
                            return !(item.pageid == record.pageid)
                        })

                        this.data = staging
                    },
                    onCancel() {
                        // console.log('Cancel');
                    },
                });
        },
        adddata() {

        },



        //树状组件方法
        onSelect(selectedKeys, info) {
            console.log('selected', selectedKeys, info);
        },
        onExpand(expandedKeys) {
            this.expandedKeys = expandedKeys;
            this.autoExpandParent = false;
        },
        onChange(e) {
            const value = e.target.value;
            const expandedKeys = dataList
                .map(item => {
                    if (item.title.indexOf(value) > -1) {
                        return getParentKey(item.key, treeTitle);
                    }
                    return null;
                })
                .filter((item, i, self) => item && self.indexOf(item) === i);
            Object.assign(this, {
                expandedKeys,
                searchValue: value,
                autoExpandParent: true,
            });
        },









    },
};
</script>
<style lang="less" scoped>
.main {
    width: 100%;
}

.data-tree-taber {
    width: 100%;
    display: flex;
    justify-content: space-between;


    .treeBOX {
        width: 180px;
        border: 1px solid #f5f5f5;

        h2 {
            font-size: 16px;
            background-color: #F9F9F9;
            height: 50px;
            line-height: 50px;
            text-align: center;
        }
    }

    .ant-table-wrapper {
        width: calc(100% - 200px);
    }
}

/deep/.multi-select {
    text-align: right;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;

    >span {
        font-size: 18px;
    }

    button:last-child {
        margin-left: 10px;
    }
}

/deep/.ant-divider {
    color: transparent;
    background-color: transparent;
}

/deep/.ant-table-row-cell-last {
    width: 155px;
}
</style>